<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>列表控件属性</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <meta name="generator" content="www.leipi.org" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
    <![endif]-->
    <link rel="stylesheet" href="leipi.style.css">
    <link rel="stylesheet" href="../../assets/css/chosen.css" />
    <link rel="stylesheet" href="../../assets/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../../assets/css/ace.min.css" />

    <script type="text/javascript" src="../../assets/js/jquery-2.0.3.min.js"></script>
    <script src="../../assets/js/chosen.jquery.min.js"></script>
    <script type="text/javascript" src="../dialogs/internal.js"></script>
    <script src="../../js/roleSelect.js"></script>
    <script src="../../js/choosenSelectCommon.js"></script>
<script type="text/javascript">

    Array.prototype.contains = function ( needle ) {
        for (i in this) {
            if (this[i] == needle) return true;
        }
        return false;
    }
function createElement(type, name)
{     
    var element = null;     
    try {        
        element = document.createElement('<'+type+' name="'+name+'">');     
    } catch (e) {}   
    if(element==null) {     
        element = document.createElement(type);     
        element.name = name;     
    } 
    return element;
}
</script>
 
</head>
<body>
<div class="content">
    <table class="table table-striped">
    <thead>
        <tr>
            <td> 
                <span> 控件名称 ：</span> 
                <input id="orgname" placeholder="必填项" type="text" class="input-medium" value=""/> <span class="label label-important">*</span>
            </td>
            <td> 
                <span> 数据源 ：</span> 
           	  		<select id="datasource"></select>
            </td>
            <td>
                <span> 数据源条件字段：</span>
                <input id="datasourceCondition"   type="text" class="input-medium" value="" readonly/>
            </td>
            <td>
                <span> 数据源条件测试：</span>
                <input id="conditionTest"   type="text" class="input-medium" value="" />
            </td>
             <td>
                                      宽 <input id="orgwidth" type="text" value="100%" class="input-small span1" placeholder="auto"/> % 或 px
            </td>
            
        </tr>

    </thead>
</table>


            <table class="table table-striped table-bordered table-condensed"  id="tbl">
            	  <thead>
	                <tr>
	                	<td colspan="11"><span class="pull-right"><button id="listAdd" class="btn btn-small btn-success listAdd" type="button">添加一行</button></span></td>
	                </tr>
                    <tr>
                        <th width="5%"> <span style='width:40px;display:block;'>序号</span> </th>
                        <th width="12%"> <span>表头</span> </th>
                        <th width="10%"> <span>类型</span> </th>
                        <th width="12%"> <span>字段</span> </th>
                        <th width="7%"> <span>可以操作的角色</span> </th>
                        <th width="7%"> <span style='width:60px;display:block;'><span>合计</span> <a id="showCountTips" title="在该列的底部显示该列的合计数值，数据类型只允许数值类型" rel="popover"><i class="icon-info-sign"></i></a></span> </th>
                        <!--
                    <th width="8%"> <span>长度</span> <a id="showTips" title="该列数据类型只允许数值类型" rel="popover"><i class="icon-info-sign"></i></a></th>
                    <th width="10%"> <span>单位</span> </th>
                    <th width="10%"> <span>数据字典</span> </th>

                    <th width="7%"> <span style='width:60px;display:block;'><span>合计</span> <a id="showCountTips" title="在该列的底部显示该列的合计数值，数据类型只允许数值类型" rel="popover"><i class="icon-info-sign"></i></a></span> </th>
                    <th width="7%"> <span>默认值</span> </th>
                    <th width="7%"><span>校验规则</span></th>  -->
                    <th width="5%"> <span style='width:40px;display:block;'>隐藏</span> </th>
                    <th width="7%"> <span style='width:40px;display:block;'>操作</span> </th>
                </tr>
            </thead>
            <tbody id="tbl1">

                <tr>
                    <td><span class="badge">1</span></td>
                    <td title="Tab键切换输入框"> <input id="item_1" type="text" onchange="changeTitle()" class="input-mini" style="width: 90%"> </td>
                    <td title="Tab键切换输入框">
                        <select id="coltype_1" class="input-medium"   onchange="typeChange(this)">
                            <option value="text">单行输入框</option>
                            <option value="textarea">多行输入框</option>
                            <option value="int">数值</option>
                            <option value="rowCount">行合计</option>
                            <!--待打开
                            <option value="colCount">多列合计</option>
                            -->
                            </select>
                        </td>
                         <td title="Tab键切换输入框"> 
                         	<label>
                         		<select id="field_1" class="input-medium" name="fieldSelect"   >
	                                <option value="">选择数据源字段</option>
                                </select>

                                <!-- 待打开   <select id="columnTotal_1"   multiple="multiple" class="chosen-select"  name="columnTotalSelect" style="display: none;">
                                   //   </select>-->
                                   </label>
                                </td>
                           <td>

                               <select multiple="multiple" class="chosen-select" id="orgrole_1"  style="display: none;" name="orgroleSelect">
                               </select>
                           </td>
                           <td title="Tab键切换输入框"> <label> <input type="checkbox" id="sum_1" class="csum" value="1"> </label> </td>

                    <td title="Tab键切换输入框"> <label> <input type="checkbox" id="isHide_1" value="1"> </label> </td>
                    <td></td>
                </tr>

                </tbody>
            </table>
        <!--div class="alert alert-danger">提示：</div-->
</div>
<script type="text/javascript">
var oNode = null,thePlugins = 'listctrl';
var rows_count = 8;

window.onload = function() {
    //弹出窗口初始化函数，这里主要是判断是编辑下拉列表还是新增
    var dataResourceIds ="";
    if(parent.document.getElementById("dataResourceIds")){
        dataResourceIds = parent.document.getElementById("dataResourceIds").value;
    }

    if( UE.plugins[thePlugins].editdom ){
        oNode = UE.plugins[thePlugins].editdom;
        $G('orgname').value = oNode.getAttribute('title');

        var gWidth=oNode.getAttribute('orgwidth');
        var gTitle = oNode.getAttribute('orgtitle'),
                gColType = oNode.getAttribute('orgcoltype'),
                gFields = oNode.getAttribute('autofield'),
                gSum = oNode.getAttribute('orgsum'),
                gOrgrole = oNode.getAttribute('orgrole'),
                gColumnTotal=oNode.getAttribute('columnTotal'),
                gconditionTest=oNode.getAttribute('conditionTest'),
                isHide = oNode.getAttribute('isHide');
                
               
        var aTitle = gTitle.split('`'),
                aColumnTotal=gColumnTotal?gColumnTotal.split('`') : null,
                aOrgrole = gOrgrole ? gOrgrole.split('`') : null,
                aSum = gSum ? gSum.split('`') : null,
                aColType = gColType ? gColType.split('`') : null,
                aFieldArray = gFields ? gFields.split('`') : null,
                oisHide = isHide ? isHide.split('`') : null;
                
       
        $G('orgwidth').value = gWidth;

        $G('conditionTest').value=gconditionTest;
    	 initDataSource(dataResourceIds);

        changeTitle();
        if(aFieldArray){
	        if(aFieldArray[0]){
	        	
	        	$("#datasource").val(aFieldArray[0].split('.')[0]);
                $("#datasource").change();
	        }
        }
    	
        for(var i = 0;i < aTitle.length-2; i++){
        	content();
        }
        
        $("#tbl tbody tr:gt(0)").find(":input").removeAttr("disabled");
        var roleHtml;
        for ( var i = 0;i < aTitle.length-1; i++ ) {	
        	var sItem = 'item_' + (i + 1),
            sColtype = 'coltype_' + (i + 1),
                    sNum = 'sum_' + (i + 1),
            sColumnTotal='columnTotal_' + (i + 1)   ,
            sField = 'field_' + (i + 1),
                    sOrgrole='orgrole_'+ (i + 1),
            sIsHide = 'isHide_' + (i + 1);

            if(gOrgrole){
                if(i>0){
                    $("#"+sOrgrole).html(roleHtml);
                    $("#"+sOrgrole).val(aOrgrole[i]);
                    chosenUpdate(sOrgrole);
                   // getRoleSelectFunBack(sOrgrole,"chosenUpdate",aOrgrole[i],sOrgrole);
                }else{
                    getRoleSelectFunBack(sOrgrole,"chosenSelect",aOrgrole[i]);
                    roleHtml=$("#"+sOrgrole).html();
                }

            }
            $G(sItem).value = aTitle[i];
            if ( gColType ) {
                $('#' + sColtype).val(aColType[i]);
                typeChange($G(sColtype));
            }
            
            if(gFields){
            	$('#' + sField).val(aFieldArray[i].split('.')[1]);
            	if(aFieldArray[i].split('.')[1] == 'id' || aFieldArray[i].split('.')[1] == 'ID'){
            		$G(sIsHide).checked = true;
            	} else if(isHide){
            		$G(sIsHide).checked = oisHide[i] == 1 ? true : false;
            	}
            }

            if(gColumnTotal){
                $('#' + sColumnTotal).val(aColumnTotal[i]);
            }
            if ( gSum ) {
                $G(sNum).checked = aSum[i] == 1 ? true : false;
            }
        }


    }else {
        setTimeout('$("select[name=\'columnTotalSelect\']").next("div").hide()',50);

        getRoleSelectFunBack("orgrole_1","chosenSelect");
        initDataSource(dataResourceIds);
    }
    //合计，强制选择 int
    $(".csum").click(function(){
        if($(this).attr("checked"))
        {
            var i = $(this).val();
            $("#coltype_"+ i).val('int');
        }

    });
}

function  selectRoleBack() {

}
dialog.oncancel = function () {
if( UE.plugins[thePlugins].editdom ) {
    delete UE.plugins[thePlugins].editdom;
}
};
dialog.onok = function (){
    if($G('orgname').value==''){
        var selectedField=$('#tbl1').children().eq(0).children().eq(3).children().find("option:selected");
        var flag=false;
        if(selectedField.length>0){
            selectedField=selectedField.get(0);
            if(selectedField.value!=''){
                $G('orgname').value=selectedField.text;
                flag=true;
            }
        }
        if(!flag){
            alert('请输入控件名称');
            $G('orgname').focus();
            return false;
        }
    }
	 var gName=$G('orgname').value.replace(/\"/g,"&quot;"),gWidth=$G('orgwidth').value;
	
    if( gName == '') {
        alert('控件名称不能为空');
        $G('orgname').focus();
        return false;
    }
var conditionTest;
    var  datasourceCondition=$("#datasourceCondition").val();
       if(datasourceCondition&&datasourceCondition.trim()!=""){
           conditionTest=$("#conditionTest").val();
           if(!conditionTest||conditionTest.trim()==""){
               alert('测试条件不能为空');
               $G('conditionTest').focus();
               return false;
           }
       }
    var datasource = $('#datasource').val();
	var datasourceSql ="" ;
    if(selectDataSource){

        datasourceSql=testSql();
    }
    var gTitle = '',gColType = ''  ,gSum = '',gOrgrole='',
        nCount = 0,autofield='' ,isHide='',columnTotal=''  ;
    rows_count = $('#tbl1 tr').length;
    
    for (var i = 1;i <= rows_count; i ++ ) {
        var oItem  = $G( "item_" + i ) ,
         oColType = $G('coltype_' + i) , oOrgrole=$G('orgrole_' + i),
                oSum = $G( 'sum_'+i ) ,
        oField = $G('field_' + i) , oisHide = $G('isHide_' + i);//,oColumnTotal= $G('columnTotal_' + i);
        
        

        
        if ( oItem.value != '') {
            if(gTitle.indexOf(oItem.value+ '`') !== -1 )
            {
                continue;//重复
            }
            gTitle += oItem.value + '`'; //表头
            nCount ++ ;
            if ( oSum.checked ) { //合计
                gSum += '1`';
            } else {
                gSum += '0`';
            }
            gColType += oColType.value + '`';
            gOrgrole+=oOrgrole.value + '`';

            autofield  += datasource+'.'+oField.value + '`';
          //  columnTotal+=oColumnTotal.value + '`';

            if ( oisHide.checked ) {
            	isHide += '1`';
            } else {
            	isHide += '0`';
            }
        }//end if
    }//end for

    if ( nCount == 0 ) {
        alert("表头项目不能为空");
        return false;
    }
	

    if( !oNode ) {

        try {
            oNode = createElement('input',gName);
            oNode.setAttribute('datasource',datasource );
            oNode.setAttribute('datasourceSql',datasourceSql );
            oNode.setAttribute('leipiPlugins',thePlugins );
            oNode.setAttribute('type','text');
            oNode.setAttribute('value','{列表控件}');
            oNode.setAttribute('readonly','readonly');
            oNode.setAttribute('title',gName);
            oNode.setAttribute('autofield',autofield);
            //oNode.setAttribute('columnTotal',columnTotal);
            oNode.setAttribute('orgtitle',gTitle);
            oNode.setAttribute('orgcoltype',gColType);
            oNode.setAttribute('isHide',isHide);
            oNode.setAttribute('conditionTest',conditionTest);
            oNode.setAttribute('orgsum',gSum);
            oNode.setAttribute('orgrole',gOrgrole);


            if( gWidth != '' ) {
                oNode.style.width = gWidth;
            }
            oNode.setAttribute('orgwidth',gWidth );
            
            editor.execCommand('insertHtml',oNode.outerHTML);
            return true ;
        } catch (e) {
            try {
                editor.execCommand('error');
            } catch ( e ) {
                alert('控件异常，请到 [雷劈网] 反馈或寻求帮助！');
            }
            return false;
        }
    } else {
        //修改
        oNode.setAttribute('orgrole',gOrgrole);
        oNode.setAttribute('leipiPlugins',thePlugins );
        oNode.setAttribute('title',gName);
        oNode.setAttribute('datasource',datasource );
        oNode.setAttribute('datasourceSql',datasourceSql );
        oNode.setAttribute('autofield',autofield);
        //oNode.setAttribute('columnTotal',columnTotal);
        oNode.setAttribute('orgtitle',gTitle);
        oNode.setAttribute('orgcoltype',gColType);
        oNode.setAttribute('isHide',isHide);
        oNode.setAttribute('conditionTest',conditionTest);
        oNode.setAttribute('orgsum',gSum);
        if( gWidth != '' ) {
            oNode.style.width = gWidth;
        }else
        {
            oNode.style.width = '';
        }
        oNode.setAttribute('orgwidth',gWidth );

        if(datasource&&datasource!=""&&parent.document.getElementById("dataResourceIds")){
            var lastDataResourceIds = parent.document.getElementById("dataResourceIds").value;
            if(lastDataResourceIds&&lastDataResourceIds!=""){
                var dataResourceIdsArray=lastDataResourceIds.split(",");
                if(!dataResourceIdsArray.contains(datasource)){
                    lastDataResourceIds=lastDataResourceIds+datasource+",";
                    parent.document.getElementById("dataResourceIds").value=lastDataResourceIds;
                }
            }else{
                parent.document.getElementById("dataResourceIds").value=datasource+",";
            }
        }
        delete UE.plugins[thePlugins].editdom; //使用后清空这个对象，变回新增模式
    }
};
var  dataSourceList;//数据源列表
var  selectDataSource;//选择的数据源
//初始化数据源
function initDataSource(dataResourceIds){
	$.ajax({
			url:'../../../autoForm/getSelectHtml.json',
			data:{dataResourceIds:dataResourceIds},
			async:false,
   			success:function(data){
                if(data.isSuccess) {
                    $('#datasource').html(data.data.html);
                    dataSourceList=data.data.dataList;
                }

   			}});
}
$(function(){
	
	//绑定change事件,并填充字段
	$("#datasource").change(function(){
		var dbId = $(this).val();
            selectDataSource=null;
            if(dataSourceList){
                $.each(dataSourceList,function (index,domEle){
                    if(domEle.id==dbId){
                        selectDataSource=domEle;
                        changeSelectDataSource(domEle);
                    }
                });
            }

	});
	
	
	$("#listAdd").click(function(){
		content(true);
		$("#tbl tbody tr:last").find(":input").removeAttr("disabled");

	});
});
//修改数据源
function  changeSelectDataSource(selectDataSource) {
    var arr=new Array();
    $("#datasourceCondition").val(selectDataSource.dbDynSqlCondition);
    var showField=selectDataSource.showField;
    arr=showField.split(',');//注split可以用字符或字符串分割
    var  optionHtml="<option value=''  >请选择数据源字段</option>";
    for(var i=0;i<arr.length;i++)
    {
        if(arr[i]!=""&&arr[i].trim()!="")
        optionHtml=optionHtml+"<option value='"+arr[i]+"'  >"+arr[i]+"</option>";
    }
    $("select[id^='field_']").html(optionHtml);
}


//测试sql
function testSql() {
    var dbDynSqlCondition=selectDataSource.dbDynSqlCondition;
    var dbDynSql=selectDataSource.dbDynSql;
    if(dbDynSqlCondition&&dbDynSqlCondition.trim()!=''){
        var  testSqlCondition=$("#conditionTest").val();
        if(testSqlCondition&&testSqlCondition.trim()!=''){
            var conditionMap=eval('(' + testSqlCondition + ')');;
            if(conditionMap){
                $.each(conditionMap, function(key, val) {
                    var reg=new RegExp("#{"+key+"}","g"); //创建正则RegExp对象
                    dbDynSql=dbDynSql.replace(reg, val);
                });
               return dbDynSql;
            }


        }

    }else {
        return dbDynSql;
    }


}
//修改了表头
function changeTitle() {
    var rows_count = $('#tbl1 tr').length;
    var itemArray=new Array();
    var  html="";
    var itemMap={};//所有的表头的map集合
    var columnTotalMap={};//所有列合计的select选中的
    for (var i = 1;i <= rows_count; i ++ ) {
          var   oColType = $G('coltype_' + i).value;
        var  tmpValue=$G( "item_" + i ).value;
        if(oColType!="rowCount"&&oColType!="colCount"){
            itemArray.push(tmpValue);
            itemMap[tmpValue]=tmpValue;
            html=html+"<option value='"+tmpValue+"'>"+tmpValue+"</option>";
        }
        if(oColType=="colCount"){
            columnTotalMap[i]=$G( "columnTotal_" + i ).value;
        }
    }
    $.each(columnTotalMap,function (index,columnTotal){
        if(itemMap[columnTotal]){
            var reg=new RegExp("value='"+columnTotal+"'","g"); //创建正则RegExp对象
            $("#columnTotal_"+index).html(html.replace(reg, "value='"+columnTotal+"' selected='selected'"));
        }else {
            $("#columnTotal_"+index).html(html);
        }
        $("#columnTotal_"+index).chosen();
        $("#columnTotal_"+index).trigger("chosen:updated");
    });

}

function resetTrNum() {
	$("#tbl tbody tr").each(function(i) {
		$(':input, select', this).each(function() {
		var $this = $(this), id = $this.attr('id'), val = $this.val();
		
		$(this).parent().parent().find("td").eq(0).find("span").html((i+1));
		
		if (id != null) {
            var newid;
		    if(id.indexOf('_')){
	            var subids = id.split('_');
	              newid = subids[0]+'_'+(i+1);
	            $this.attr('id',newid);
	     	 }else{
	             newid = id+'_'+(i+1);
	           $this.attr('id',newid);
	         }
	         if(newid.indexOf('orgrole')){
             }
		   }
	 });
	});
}
function typeChange(obj){
    var  val=$(obj).val();
    var fieldSelect=$(obj).parent().next().find("select[name='fieldSelect']");
   var columnTotalSelect= $(obj).parent().next().find("select[name='columnTotalSelect']").next("div");
     if(val=="colCount"){//列合计
         $(columnTotalSelect).show();
         $(fieldSelect).hide();
    }else{
         $(fieldSelect).show();
      $(columnTotalSelect).hide();
         if(val=="rowCount"){ //行合计
             $(fieldSelect).attr("disabled","disabled");
             $(fieldSelect).hide();
         }else{
             $(fieldSelect).removeAttr("disabled");

         }
    }

    changeTitle();

}
//  待打开  '     <select id="columnTotal_2"   multiple="multiple" class="chosen-select"  name="columnTotalSelect" style="display: none;">'+
//待打开'      </select>'+
function content(add){
    var tbHtml ='<tr><td><span class="badge">1</span></td> <td title="Tab键切换输入框"> <input id="item_2" type="text" onchange="changeTitle()" class="input-mini" style="width: 90%"> </td><td title="Tab键切换输入框"><select id="coltype_2" class="input-medium"   onchange="typeChange(this)"> <option value="text">单行输入框</option><option value="textarea">多行输入框</option><option value="int">数值</option>'+
            ' <option value="rowCount">行合计</option>'+

            '</select>'+
    '</td>'+
    ' <td title="Tab键切换输入框">'+
    '  <label>'+
    '  <select id="field_2" class="input-medium" name="fieldSelect"   >'+
    '    <option value="">选择数据源字段</option>'+
    '   </select>'+

    '       </label>'+
    '       </td>'+
    '       <td>'+
    '       <select multiple="multiple" class="chosen-select" id="orgrole_2" name="orgroleSelect" style="display: none;">'+
    '       </select>'+
    '       </td>'+
    '       <td title="Tab键切换输入框"> <label> <input type="checkbox" id="sum_2" class="csum" value="1"> </label> </td>'+
    '     <td title="Tab键切换输入框"> <label> <input type="checkbox" id="isHide_2" value="1"> </label> </td>'+
    ' <td><button class="btn btn-small btn-success delrow" type="button">删除</button></td>'+
    '     </tr>';
	$("#tbl tbody").eq(0).find("tr:last").after(tbHtml);

	$("#tbl tbody").eq(0).find("tr:last").find("input").each(function(){$(this).val("");});

	$(".delrow").die().live("click",function(){$(this).parent().parent().remove();resetTrNum();});
	resetTrNum();
  //  $("#tbl tbody").eq(0).find("tr:last").find("select[name='columnTotalSelect']").html($("#columnTotal_1").html());
    $("#tbl tbody").eq(0).find("tr:last").find("select[name='fieldSelect']").html($("#field_1").html());
    $("#tbl tbody").eq(0).find("tr:last").find("select[name='orgroleSelect']").html($("#orgrole_1").html());
    if(add){
        $("#tbl tbody").eq(0).find("tr:last").find("select[name='orgroleSelect']").chosen();
    }
    //$("#tbl tbody").eq(0).find("tr:last").find("select[name='orgroleSelect']").chosen();
    changeTitle();
	$(".delrow").click(function(){$(this).parent().parent().remove();resetTrNum();});

}
</script>
</body>
</html>
